<template>
  <view class="container">
    <view class="content">
      <view class="header">
        <text class="title">答卷历史</text>
      </view>
      
      <view class="history-list" v-if="historyList.length > 0">
        <view 
          class="history-item" 
          v-for="(item, index) in historyList" 
          :key="index"
          @click="viewDetail(item)"
        >
          <view class="item-content">
            <text class="survey-title">{{ item.title }}</text>
            <text class="submit-time">{{ formatDate(item.submitTime) }}</text>
            <text class="status" :class="item.status">{{ getStatusText(item.status) }}</text>
          </view>
          <text class="arrow">→</text>
        </view>
      </view>
      
      <view class="empty" v-else>
        <text class="empty-text">暂无答卷历史</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HistoryPage',
  data() {
    return {
      historyList: []
    };
  },
  onLoad() {
    this.getHistoryList();
  },
  methods: {
    getHistoryList() {
      // 模拟数据
      this.historyList = [
        {
          id: 1,
          title: '睡眠质量调查问卷',
          submitTime: new Date().toISOString(),
          status: 'completed'
        },
        {
          id: 2,
          title: '生活习惯调查问卷',
          submitTime: new Date(Date.now() - 86400000).toISOString(),
          status: 'completed'
        }
      ];
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return this.$formatDate(date, 'yyyy-MM-dd hh:mm');
    },
    getStatusText(status) {
      const statusMap = {
        'completed': '已完成',
        'draft': '草稿',
        'submitted': '已提交'
      };
      return statusMap[status] || '未知';
    },
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/my/history-detail?id=${item.id}`
      });
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx;
}

.header {
  padding: 30rpx 0;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.history-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.history-item:last-child {
  border-bottom: none;
}

.item-content {
  flex: 1;
}

.survey-title {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 12rpx;
}

.submit-time {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.status {
  display: inline-block;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.status.completed {
  background-color: #e8f5e8;
  color: #52c41a;
}

.status.draft {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status.submitted {
  background-color: #e6f7ff;
  color: #1890ff;
}

.arrow {
  font-size: 32rpx;
  color: #ccc;
}

.empty {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 